<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <style>
    html,body{position:relative;width:100%;height:100%;margin:0;padding:0;}
    #board{position:absolute;top:0;left:0;right:0;bottom:0;}
    #login-panel{position:absolute;top:50%;left:50%;width:500px;height:250px;margin-top:-125px;margin-left:-250px;border:1px solid #ccc;text-align:center;padding-top: 120px;z-index:9999;}
    #start-panel{position:absolute;top:50%;left:50%;width:500px;height:80px;margin-top:-40px;margin-left:-250px;border:1px solid #ccc;text-align:center;z-index:999;display:none;}
    #search-panel{position:absolute;top:50%;left:50%;width:500px;height:80px;margin-top:-40px;margin-left:-250px;line-height:80px;text-align:center;border:1px solid #ccc;z-index:9999;display:none;}
    #table-panel{position:absolute;top:0;left:0;right:300px;bottom:0;border:1px solid #ccc;}
    #chat-panel{position:absolute;top:0;right:0;bottom:0;width:300px;border:1px solid #ccc;}
    #chat-message-panel{position:absolute;top:0;left:0;right:0;bottom:80px;overflow:scroll;}
    #chat-input-panel{position:absolute;left:0;right:0;bottom:0;height:80px;}
    #gameover-panel{position:absolute;top:50%;left:50%;width:500px;height:400px;border:1px solid #ccc;margin-left:-350px;margin-top:-200px;z-index:999;text-align:center;background:#fff;padding:10px;}
    #board.login #login-panel{
        display:block;
    }
    #board.login #start-panel, #board.login #search-panel, #board.login #table-panel, #board.login #gameover-panel, #board.login #chat-panel{
        display:none;
    }
    #board.start #start-panel{
        display:block;
    }
    #board.start #login-panel, #board.start #search-panel, #board.start #gameover-panel, #board.start #table-panel, #board.start #chat-panel{
        display:none;
    }
    #board.search #search-panel{
        display:block;
    }
    #board.search #login-panel, #board.search #start-panel, #board.search #gameover-panel, #board.search #table-panel, #board.search #chat-panel{
        display:none;
    }
    #board.wait #login-panel, #board.wait #start-panel, #board.wait #gameover-panel{
        display:none;
    }
    #board.wait #search-panel, #board.wait #table-panel, #board.wait #chat-panel{
        display:block;
    }
    #board.playing #table-panel, #board.playing #chat-panel{
        display:block;
    }
    #board.playing #login-panel, #board.playing #start-panel, #board.playing #gameover-panel{
        display:none;
    }
    #board.gameover #login-panel, #board.gameover #start-panel, #board.gameover #search-panel{
        display:none;
    }
    #board.gameover #gameover-panel, #board.gameover #table-panel, #board.gameover #chat-panel{
        display:block;
    }
    #table-my{
        position:absolute;left:50%;bottom:0;width:800px;height:150px;margin-left:-400px;
    }
    #table-my .nickname{
        position:absolute;left:0;right:0;bottom:0;height:40px;
        text-align:center;
    }
    #table-my .cards{
        position:absolute;top:0;left:0;right:0;bottom:40px;
        display:flex;justify-content:space-around;
    }
    #table-my .cards .card{
        width:60px;height:100px;border:1px solid #ccc;border-radius:10px;
        text-align:center;
    }
    #table-my .cards .card.choosed{
        margin-top:-20px;
    }
    #table-my .btns{
        position:absolute;top:-80px;left:50%;width:300px;height:80px;margin-left:-150px;text-align:center;z-index:99999;
    }
    #board #table-my .btns .call, #board #table-my .btns .out{
        display:none;
    }
    #board.call #table-panel #table-my .btns .call{
        display:block;
    }
    #board.out #table-panel #table-my .btns .out{
        display:block;
    }
    #table-left{
        position:absolute;left:10px;top:50%;width:250px;height:500px;margin-top:-250px;
    }
    #table-left .nickname{
        position:absolute;top:50%;left:0;width:80px;height:150px;margin-top:-75px;
    }
    #table-left .cards{
        position:absolute;top:0;left:80px;right:0;bottom:0;
    }
    #table-left .cards .card{
        width:100px;height:20px;border:1px solid #ccc;border-top-left-radius:10px;border-top-right-radius:10px;
        border-bottom:0px;margin-top:-5px;
    }
    #table-left .cards .card.last{
        width:100px;height:60px;border:1px solid #ccc;border-radius:10px;
    }
    #table-right{
        position:absolute;right:10px;top:50%;width:250px;height:500px;margin-top:-250px;
    }
    #table-right .nickname{
        position:absolute;top:50%;right:0;width:80px;height:150px;margin-top:-75px;
    }
    #table-right .cards{
        position:absolute;top:0;left:0;bottom:0;right:80px;
    }
    #table-right .cards .card{
        width:100px;height:20px;border:1px solid #ccc;border-top-left-radius:10px;border-top-right-radius:10px;
        border-bottom:0px;margin-top:-5px;
    }
    #table-right .cards .card.last{
        width:100px;height:60px;border:1px solid #ccc;border-radius:10px;
    }
    #table-status{
        position:absolute;top:10px;left:50%;width:500px;height:40px;line-height:40px;margin-left:-250px;
        text-align:center;border:1px solid #999;border-left-bottom-radius:10px; border-right-bottom-radius:10px;
    }
    #table-hole{
        position:absolute;top:50px;left:50%;width:500px;height:200px;margin-left:-250px;
    }
    #table-hole .cards{
        position:absolute;top:0;left:0;right:0;bottom:0;
        display:flex;justify-content: space-around;
    }
    #table-hole .cards .card{
        width:60px;height:100px;border:1px solid #ccc;border-radius:10px;
    }
    #table-outs{
        position:absolute;top:50%;left:50%;width:400px;height:200px;margin-left:-200px;margin-top:-100px;
    }
    #table-outs .cards{
        position:absolute;top:0;left:0;right:0;bottom:0;
        display:flex;
    }
    #table-outs .cards .card{
        width:60px;height:100px;border-radius:10px;border:1px solid #ccc;
    }
    </style>
</head>
<body>
    <div id="board" class="login">
        <div id="login-panel">
            <div><input type="text" name="nickname" value="" placeholder="请填写昵称" /></div>
            <div><button id="btn-login">登陆</button></div>
        </div>
        <div id="start-panel">
            <button id="btn-start">开始游戏</button>
        </div>
        <div id="search-panel">正在等待对手</div>
        <div id="gameover-panel">
            <div class="userlist"></div>
            <div>
                <button id="btn-next">下一局</button>
                <button id="btn-gameout">离开</button>
            </div>
        </div>
        <div id="table-panel">
            <div id="table-status"></div>
            <div id="table-my">
                <div class="nickname">my name</div>
                <div class="cards"></div>
                <div class="btns">
                    <div class="call">
                        <button id="btn-call">抢地主</button>
                        <button id="btn-uncall">不抢</button>
                    </div>
                    <div class="out">
                        <button id="btn-out">出牌</button>
                        <button id="btn-unout">不出</button>
                    </div>
                </div>
            </div>
            <div id="table-left">
                <div class="nickname"></div>
                <div class="cards"></div>
            </div>
            <div id="table-right">
                <div class="nickname"></div>
                <div class="cards"></div>
            </div>
            <div id="table-hole">
                <div class="cards"></div>
            </div>
            <div id="table-outs">
                <div class="cards"></div>
            </div>
        </div>
        <div id="chat-panel">
            <div id="chat-message-panel">
            </div>
            <div id="chat-input-panel">
                <input type="text" name="content" />
                <button id="btn-send">发送</button>
            </div>
        </div>
    </div>
</body>
</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/const.js"></script>
<script src="js/msgpack.js"></script>
<script src="js/Packet.js"></script>
<script src="js/Route.js"></script>
<script src="js/user.js"></script>
<script src="js/poker.js"></script>
<script src="js/Request.js"></script>
<script src="js/Response.js"></script>
<script src="js/game.js"></script>
<script>
var url = '{{ $url }}';
var game = Game.start(url);
$(function(){
    $('#btn-login').click(function(){
        var nickname = $('input[name=nickname]').val();
        if (nickname == '') {
            alert('请填写昵称');
            return;
        }
        Req.login(game, nickname)
    });

    $('#btn-start').click(function(){
        Req.start(game);
        $('#board').removeClass($('#board').attr('class')).addClass('search');
    });
    
    $('#btn-send').click(function(){
        var content = $('input[name=content]').val();
        if (content == '') {
            return;
        }
        Req.chat(game, content)
        $('input[name=content]').val('');
    });

    $('#btn-next').click(function(){
        Req.start(game);
        $('#board').removeClass($('#board').attr('class')).addClass('search');
    });
    $('#btn-gameout').click(function(){
        Req.logout(game);
        $('#board').removeClass($('#board').attr('class')).addClass('login');
    });

    //选择出牌
    $('#table-my').on('click', '.card', function(){
        $(this).data('choosed', !$(this).data('choosed'));
        if ($(this).data('choosed')) {
            $(this).addClass('choosed');
        } else {
            $(this).removeClass('choosed');
        }
    })

    $('#btn-call').click(function(){
        Req.call(game, true);
    });
    $('#btn-uncall').click(function(){
        Req.call(game, false);
    });

    $('#btn-out').click(function(){
        var cards = [];
        $('#table-my .card.choosed').each(function(){
            cards.push($(this).data('value'));
        });
        if (cards.length <= 0) {
            alert('请选择要出的牌');
            return;
        }
        Req.out(game, cards);
    });
    $('#btn-unout').click(function(){
        Req.out(game, []);
    });
});
</script>